<template>
	<view class="navTab">
		<view v-for="(item, index) in coinList" :key="index" :class="{itemTab: true, currentTab: currentTab == index}" @click="changeCurrentTab(index)">
			{{ item.coin_name }}
		</view>
	</view>
</template>

<script>
	import {
		getCoinList
	} from "@/js_sdk/uni-admin/wallet.js"
	export default {
		name:"nav-tab",
		data() {
			return {
				coinList: [],
				currentTab: 0
			};
		},
		created() {
			this.loadData();
		},
		methods: {
			changeCurrentTab(index) {
				this.currentTab = index
				let data = {coin: this.coinList[this.currentTab].id}
				this.$emit('change-current-tab', data)
			},
			async loadData() {
				try{
					let res = await getCoinList()
					this.coinList = res.data
					let data = {coin: this.coinList[this.currentTab].id}
					this.$emit('ready', data)
				}catch(e){
					console.error(e)
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.navTab {
		border-bottom: 1px solid #C4C4C4;
		margin-bottom: 12.5rpx;
		display: flex;
		height: 12.5rpx;
		line-height: 0;
		.itemTab {
			width: 39.06rpx;
			text-align: center;
			font-size: 7.03rpx;
			font-weight: bold;
			user-select: none;
		}
		.currentTab {
			color: #12A234;
			border-bottom: 1.17rpx solid #12A234;
			// outline: 0.78rpx solid #12A234;
		}
	}
</style>
